<template>
    <div class="config">
        <div class="panel">
            <div class="title"><img slot="icon" src="../img/border.png" height="24">基础信息设置</div>
            <mt-cell title="群名称">
                <mt-input placeholder="请输入您分享课程的名称" v-model="form.name"></mt-input>
            </mt-cell>
            <mt-cell title="群简介">
                <mt-input placeholder="请输入您课程的简介" v-model="form.introduction"></mt-input>
            </mt-cell>
        </div>
        <div class="panel">
            <div class="title"><img slot="icon" src="../img/border.png" height="24">解锁设置</div>
            <mt-cell title="解锁周期" class="radio">
                <mt-button size="small" :class="{'is-active': form.period==1}" plain @click="checkPeriod($event, 1)">双周</mt-button>
                <mt-button size="small" :class="{'is-active': form.period==2}" plain @click="checkPeriod($event, 2)">每月</mt-button>
            </mt-cell>
            <mt-cell title="分享人数">
                <mt-input type="number" :maxlength="2" placeholder="分享之后解锁课程，1-10人" v-model="form.num"></mt-input>
            </mt-cell>
            <mt-cell title="分享页海报" to="/poster" :class="{'primary': form.postName}" is-link :value="('已选：'+form.postName) || '选择海报'">
            </mt-cell>
        </div>
        <div class="text-center">
            <mt-button type="primary" class="apply-button" @click="submit">提交</mt-button>
        </div>
    </div>
</template>

<script>
    import { addCourseConf, getCourseConf, updateCourseConf } from '@/api'
    export default {
        name: 'course-config',
        data() {
            return {
                isUpdate: false,
                form: {
                    name: '',
                    introduction: '',
                    period: 1,
                    num: '',
                    postId: '',
                    url: '',
                    postName: '',
                    headUrl: ''
                },
                
            }
        },
        activated(){
            let posterInfo = window.sessionStorage.getItem('posterInfo') ? JSON.parse(window.sessionStorage.getItem('posterInfo')) : {};
            if(posterInfo.id){
                this.form.postId = posterInfo.id
                this.form.postName = posterInfo.name || '未命名海报'
                this.form.url = posterInfo.url
                this.form.headUrl = posterInfo.headUrl
            }
        },
        created(){
            getCourseConf().then( res=> {
                if(res.data.result && res.data.result.name){
                    this.isUpdate = true
                    this.form = res.data.result
                    window.sessionStorage.setItem('headUrl', this.form.headUrl)
                }
            })
        },
        methods: {
            submit() {
                this.form.num = ~~this.form.num
                if(JSON.stringify(this.form).indexOf('""') > 0){
                    this.$toast('请填写完整信息')
                    return false
                }
                if(Number(this.form.num) < 1 || Number(this.form.num) > 10){
                    this.$toast('分享人数请填写1-10')
                    return false
                }
                let saveUrl = this.isUpdate ? updateCourseConf : addCourseConf
                saveUrl(this.form).then(()=>{
                    this.$toast('配置成功')
                    setTimeout(function(){
                        this.$router.push('/home')
                    }.bind(this), 1500);
                })
            },
            checkPeriod(e, v) {
                this.form.period = v
            }
        },
    }
</script>

<style lang="scss" scoped>
    .config /deep/ {
        .panel {
            margin: .2rem 0 0;
        }

        .title {
            padding: 5px 10px;
            height: 26px;
            line-height: 26px;
            font-size: 18px;

            img {
                float: left;
                margin-right: 5px;
            }
        }
        .primary .mint-cell-wrapper .mint-cell-value{
            color: var(--primaryColor);
        }
        .mint-cell-wrapper {
            font-size: 14px;

            .mint-cell-title {
                flex: inherit;
                width: 80px;
            }

            .mint-cell-value {
                flex: 1;
                -webkit-box-flex: 1;

                &.is-link {
                    span {
                        display: block;
                        width: 100%;
                        text-align: right;
                    }
                }
            }
        }

        .mt-col-1 {
            text-align: center;
        }

        .radio {
            .mint-button {
                padding: 0 14px;
                margin: 0 .2rem 0 .1rem;
                box-sizing: content-box;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                &.is-plain {
                    border-color: #D2D4D9;
                    color: #D2D4D9;
                }

                &.is-active {
                    background-image: url('../img/btn-active.png');
                    background-origin: border-box;
                    background-size: contain;
                    border: none;
                    box-shadow: none;
                    border-radius: 0;
                    background-color: #fff;
                    background-repeat: no-repeat;
                    color: var(--primaryColor);
                    padding: 0 15px;
                    height: 24px;
                    line-height: 24px;
                }
            }
        }


        .apply-button {
            margin-top: 30px;
            display: inline-block;
            background: #FEB52D;
            width: 50%;
            height: 32px;
        }
    }
</style>